<template>
    <ContentWrap>
        <h2 class="fonts24 fontw500">短信管理</h2>
        <div class="flex justify-between">
            <div class="flex aic">
                <ElInput v-model="state.ruleForm.keywords" style="width: 266px;height: 32px;margin-right: 10px;"
                    placeholder="搜索应聘者姓名/手机号" clearable :prefix-icon="Search" />
                <el-select v-model="state.ruleForm.smsType" placeholder="通知类别" style="margin-right: 16px;">
                    <el-option v-for="item in state.options1" :key="item.dictValue" :label="item.dictLabel"
                        :value="item.dictValue" />
                </el-select>
                <el-select v-model="state.ruleForm.positionName" placeholder="职位" style="margin-right: 16px;">
                    <el-option v-for="item in state.options2" :key="item.positionName" :label="item.positionName"
                        :value="item.positionName" />
                </el-select>
                <ElInput v-model="state.ruleForm.replyContent" style="width: 266px;height: 32px;margin-right: 10px;"
                    placeholder="短信回复内容" :prefix-icon="Search" clearable/>
                <el-date-picker v-model="state.ruleForm.time" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" range-separator="至"
                    start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" style="margin-right: 16px;" />
                <ElButton type="primary" :icon="Search" @click="onSearch">
                    查询
                </ElButton>
                <ElButton :icon="Refresh" @click="onReset">
                    重置
                </ElButton>
            </div>
        </div>
        <div class="" style="margin-top: 25px;">
            <Table v-model:pageSize="pageSize" v-model:currentPage="currentPage" :columns="allSchemas.tableColumns"
                :data="dataList" :loading="loading" :pagination="{ total: total }" @register="tableRegister"
                :headerCellStyle="headerCellStyle" :rowStyle="rowStyle" />
        </div>
    </ContentWrap>
    <Dialog v-model="dialogVisible1" title="通知详情" width="500">
        <p class="fontz fonts14 message_p">
            {{ state.msgContent }}
        </p>
        <div class="flex jcfe">
            <ElButton type="primary" @click="onKnow">
                我知道了
            </ElButton>
        </div>
    </Dialog>
</template>
    
<script setup lang="tsx">
import { positionListAll } from "@/api/recruit/index"
import { dictSect } from "@/utils/dictUnit"
import { Table } from '@/components/Table'
import { useTable } from '@/hooks/web/useTable'
import { Search, Plus, Refresh, Pointer, Star } from '@element-plus/icons-vue'
import { Dialog } from '@/components/Dialog'
import { useEmitt } from '@/hooks/event/useEmitt'
import { ElButton, ElInput, ElMessage } from 'element-plus'
// import { propTypes } from '@/utils/propTypes'
import { useI18n } from '@/hooks/web/useI18n'
import { ContentWrap } from '@/components/ContentWrap'
import { ref, reactive, unref } from "vue"
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useForm } from '@/hooks/web/useForm'
import { useValidator } from '@/hooks/web/useValidator'
import { smsLogList } from "@/api/message/index"
import { formatToDateTime } from "@/utils/dateUtil"
import { onMounted } from 'vue'
const { required } = useValidator()
const { formRegister, formMethods } = useForm()
const { getElFormExpose } = formMethods
const { t } = useI18n()
const dialogVisible1 = ref(false)
const state = reactive({
    ruleForm: {
        time:[],
    } as any,
    react: false,
    options1: [] as any,
    options2: [] as any,
    msgContent: ""
})
onMounted(() => {
    state.options1 = dictSect("sms_type")
})
// 表格基本信息
const crudSchemas = reactive<CrudSchema[]>([
    {
        field: 'smsType',
        label: t('通知类别'),
    },
    {
        field: 'positionName',
        label: t('职位'),
    },
    {
        field: 'userName',
        label: t('应聘者姓名'),
    },
    {
        field: 'phonenumber',
        label: t('应聘者手机号'),
    },
    {
        field: 'createTime',
        label: t('发送通知时间'),
    },
    {
        field: 'replyTime',
        label: t('回复时间'),
    },
    {
        field: 'replyContent',
        label: t('回复内容'),
        search: {
            hidden: true
        }
    },
    {
        field: 'action',
        width: '260px',
        label: t('tableDemo.action'),
        search: {
            hidden: true
        },
        form: {
            hidden: true
        },
        detail: {
            hidden: true
        },
        table: {
            slots: {
                default: (data: any) => {
                    return (
                        <>
                            <ElButton link type="primary" onClick={() => action(data[0].row)}>
                                查看详情
                            </ElButton>
                        </>
                    )
                }
            }
        }
    }
])
const { tableRegister, tableState, tableMethods } = useTable({
    fetchDataApi: async () => {
        const { currentPage, pageSize } = tableState
        const res: any = await smsLogList({
            pageNum: state.react ? 1 : unref(currentPage),
            pageSize: unref(pageSize),
            searchValue: state.ruleForm.keywords,
            positionName: state.ruleForm.positionName,
            createTimeGe: state.ruleForm.time[0],
            createTimeLe: state.ruleForm.time[1],
            smsType: state.ruleForm.smsType,
            replyContent:state.ruleForm.replyContent,
            isAsc:"desc",
            orderByColumn:"createTime",

        })
        let sms_type = dictSect("sms_type")
        res.rows.forEach(elements => {
            sms_type.forEach(element => {
                if (elements.smsType == element.dictValue) {
                    elements.sms_typeName=element.dictLabel
                }
            })
        })

        console.log(res);
        state.react = false
        return {
            list: res.rows,
            total: res.total
        }
    },
    fetchDelApi: async () => {
        const res = await delTableListApi(unref(ids))
        return !!res
    }
})
// 表格头部信息
const headerCellStyle: any = {
    "background": "#F2F6FC",
    "height": "48px"
}
// 
const rowStyle: any = {
    "height": "48px"
}
const { loading, dataList, total, currentPage, pageSize } = tableState

const { getList, getElTableExpose, delList } = tableMethods

getList()
useEmitt({
    name: 'getList',
    callback: (type: string) => {
        if (type === 'add') {
            currentPage.value = 1
        }
        getList()
    }
})
const { allSchemas } = useCrudSchemas(crudSchemas)
const action = (row: any) => {
    console.log("编辑", row);
    state.msgContent = row.msgContent
    dialogVisible1.value = true
}

// 查询
const onSearch = () => {
    console.log("查询");
    state.react = true
    getList()
}
// 重置
const onReset = () => {
    console.log("重置");
    state.ruleForm.positionName = ""
    state.ruleForm.keywords = ""
    state.ruleForm.smsType = ""
    state.ruleForm.time = []
    state.react = true
    getList()
}
// 
const onKnow = () => {
    dialogVisible1.value = false
}

const positionListAllApi = async () => {
    await positionListAll().then(res => {
        console.log("全部职位", res);
        state.options2 = res.data
    })
}
positionListAllApi()
</script>
    
<style lang="less" scoped>
.message_p {
    padding-bottom: 16px;
}

h2 {
    position: relative;
    margin: 0;
    margin-bottom: 26px;

    &::after {
        position: absolute;
        left: -20px;
        top: 2px;
        content: "";
        width: 8px;
        height: 24px;
        background: #2F6CBC;
        border-radius: 0px 4px 4px 0px;
        opacity: 1;
    }
}
</style>